<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/top.css" />
    <link rel="stylesheet" href="../css/car.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
      /* div{
        background: url(../images/buy_inphoer.jpg);
        background: url(../images/buy_inphui.jpg);
      } */
    </style>
  </head>
  <body>
    <div class="top">
      <div class="top_left">
        <span class="right"> 下拉查看类目 </span>
        <dl>
          <dd><a href="#">礼包手办</a></dd>
          <dd><a href="#">手办模型</a></dd>
          <dd><a href="#">数码电子</a></dd>
          <dd><a href="#">新品专区</a></dd>
          <dd><a href="#">服饰日用</a></dd>
          <dd><a href="#">玩家共创</a></dd>
        </dl>
      </div>
      <div class="top_center"><a href="../index.html"></a></div>

      <ul class="top_right">
        <li>
          <a href="#">请QQ登录</a>
        </li>
        <li>
          <a href="#">我的订单</a>

          <dl>
            <dd><a href="#">我的订单</a></dd>
            <dd><a href="#">我的收藏</a></dd>
            <dd><a href="#">我的优惠券</a></dd>
            <dd><a href="#">我的道具</a></dd>
          </dl>
        </li>
        <li>
          <a href="#">周边公告</a>

          <dl>
            <dd><a href="#">疫情影响暂停发货</a></dd>
            <dd><a href="#">关于《DNF官方艺术设定》</a></dd>
            <dd><a href="#">CDk系统已恢复</a></dd>
            <dd><a href="#">游戏道具领取时效</a></dd>
            <dd><a href="#">活动商品结算通知</a></dd>
          </dl>
        </li>
        <li>
          <a href="#">帮助中心</a>

          <dl>
            <dd><a href="#">购物指南</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">售后服务</a></dd>
          </dl>
        </li>
        <li>
          <a href="#">手机周边</a>
        </li>
      </ul>
    </div>

    <!-- 商品列表 -->
    <div class="car_goods">
      <ul>
        <li>
          <p id="special"></p>
          全选
        </li>
        <li>商品</li>
        <li>单价(元)</li>
        <li>数量</li>
        <li>小计</li>
        <li>操作</li>
      </ul>

      <div class="select_goods" id="box">
        <ul>
          <li></li>
          <li>
            <img src="../images/da2.jpg" alt="" /><span>虎虎生威礼盒</span>
          </li>
          <li>￥368</li>
          <li><input type="number" min="1" value="1" /></li>
          <li>¥ 1104</li>
          <li><button>删除</button></li>
        </ul>
      </div>
      <div class="buy">
        <a href="../index.html">继续购物</a>
        <a href="#" id="delAll">删除选中商品</a>
        <span>承诺:赠送游戏道具/7天无理由退换货/ 100%官方正品</span>
      </div>
    </div>
  </body>
  <script>
    //获取头部 ul列表的第一个qq登录
    let qqLi = document.querySelector(".top .top_right li:nth-child(1)");
    if (localStorage.getItem("id")) {
      qqLi.innerHTML = `欢迎您 <a href='#' onclick='quit()'>退出</a>`;
      qqLi.style.fontSize = "12px";
      function quit() {
        localStorage.clear();
        location.reload();
      }
    } else {
      qqLi.innerHTML = '<a href="./login.html">请QQ登录</a>';
      qqLi.style.fontSize = "14px";
    }

    let n = 0;
    let listAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
    let carGoods;
    axios
      .get(listAPI, {
        params: { id: localStorage.getItem("id") },
      })
      .then((res1) => {
        console.log(res1.data.data);
        carGoods = res1.data.data;
        showPage();
      });

    function numChange(pid, uid, price, ipt) {
      let updateAPI = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
      axios
        .get(updateAPI, { params: { uid: uid, pid: pid, pnum: ipt.value } })
        .then((r) => {
          pie.innerText = ipt.value * price;
          location.reload();
        });
    }
    function del(pid, btn) {
      let delAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
      axios
        .get(delAPI, { params: { pid: pid, uid: localStorage.getItem("id") } })
        .then((r) => {
          btn.parentNode.parentNode.remove();
        });
    }

    //更新页面
    function showPage() {
      var str = "";
      carGoods.forEach((item, index) => {
        str += `
        <ul>
          <li id='show'></li>
          <li>
            <img src=${item.pimg} alt="" /><span>${item.pname}</span>
          </li>
          <li>￥${item.pprice}</li>
          <li><input type="number" min="1" value='${
            item.pnum
          }'id='nub' onchange='numChange(${item.pid},${item.uid},${
          item.pprice
        },this)' /></li>
          <li id='pie'>¥${item.pprice * item.pnum}</li>
          <li><button onclick='del(${item.pid},this)'>删除</button></li>
        </ul>
           `;
      });
      box.innerHTML = str;
      let shows = document.querySelectorAll("#show");
      (function () {
        special.setAttribute("flag", 0);
        special.style.background =
          "url(../images/kong.jpg) no-repeat center center";
        special.onclick = function () {
          let num = Number(this.getAttribute("flag"));
          if (num) {
            this.style.background =
              "url(../images/kong.jpg) no-repeat center center";
            this.setAttribute("flag", 0);
          } else {
            this.style.background =
              "url(../images/dui.jpg) no-repeat center center";
            this.setAttribute("flag", 1);
          }
        };
      })();

      shows.forEach(function (item, index) {
        item.setAttribute("flag", 0);
        item.style.background =
          "url(../images/kong.jpg) no-repeat center center";
        item.onclick = function () {
          let num = Number(this.getAttribute("flag"));
          if (num) {
            item.style.background =
              "url(../images/kong.jpg) no-repeat center center";
            this.setAttribute("flag", 0);
          } else {
            item.style.background =
              "url(../images/dui.jpg) no-repeat center center";
            this.setAttribute("flag", 1);
          }
        };
      });
      let n = 0;
      special.addEventListener("click", function () {
        let num = Number(this.getAttribute("flag"));
        if (num) {
          shows.forEach(function (item, index) {
            item.style.background =
              "url(../images/dui.jpg) no-repeat center center";
            item.setAttribute("flag", 1);
          });
          n = shows.length;
        } else {
          shows.forEach(function (item, index) {
            item.style.background =
              "url(../images/kong.jpg) no-repeat center center";
            item.setAttribute("flag", 0);
          });
          n = 0;
        }
      });
      shows.forEach(function (item, index) {
        item.addEventListener("click", function () {
          let num = Number(this.getAttribute("flag"));
          if (num) {
            n++;
          } else {
            n--;
          }
          if (n == shows.length) {
            special.setAttribute("flag", 1);
            special.style.background =
              "url(../images/dui.jpg) no-repeat center center";
          } else {
            special.setAttribute("flag", 0);
            special.style.background =
              "url(../images/kong.jpg) no-repeat center center";
          }
        });
      });
    }

    // }
    $(".top_left").hover(
      function () {
        $(".top_left dl").slideDown();
      },
      function () {
        $(".top_left dl").slideUp();
      }
    );
    $(".top_right li:eq(1)").hover(
      function () {
        $(".top_right li:eq(1) dl").slideDown();
      },
      function () {
        $(".top_right li:eq(1) dl").slideUp();
      }
    );
    $(".top_right li:eq(2)").hover(
      function () {
        $(".top_right li:eq(2) dl").slideDown();
      },
      function () {
        $(".top_right li:eq(2) dl").slideUp();
      }
    );
    $(".top_right li:eq(3)").hover(
      function () {
        $(".top_right li:eq(3) dl").slideDown();
      },
      function () {
        $(".top_right li:eq(3) dl").slideUp();
      }
    );
  </script>
</html>
